<template>
  <a-drawer
    :title="title"
    :width="drawerWidth"
    :visible="visible"
    :maskClosable="false"
    @close="handleCancel"
    cancelText="关闭"
    :wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}" 
  >
    
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
      
<#list fieldList as field>
<#if field.name !='id' && field.remark?default('')?trim?length gt 0 && field.name != 'createTime' && field.name != 'updateTime'>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="${field.remark}">
<#if field.formAway == 1>
          <a-input placeholder="请输入${field.remark}" v-decorator="[ '${field.name}', <#if field.isView?default(0)?default(0) == 1>disableSubmit ? {} : validatorRules.${field.name} <#else>{}</#if>]" />
<#elseif field.formAway == 2>
          <a-input type="password"  placeholder="请输入${field.remark}" v-decorator="[ '${field.name}', <#if field.isView?default(0) == 1>disableSubmit ? {} : validatorRules.${field.name} <#else>{}</#if>]" />
<#elseif field.formAway == 3>
          <a-input-number :min="1" :max="10000" placeholder="请输入${field.remark}" v-decorator="[ '${field.name}', <#if field.isView?default(0) == 1>disableSubmit ? {} : validatorRules.${field.name} <#else>{}</#if>]"/>
<#elseif field.formAway == 4>
          <a-date-picker v-decorator="[ '${field.name}', <#if field.isView?default(0) == 1>disableSubmit ? {} : validatorRules.${field.name} <#else>{}</#if>]" />
<#elseif field.formAway == 5>
          <a-time-picker v-decorator="[ '${field.name}', <#if field.isView?default(0) == 1>disableSubmit ? {} : validatorRules.${field.name} <#else>{}</#if>]" />
<#elseif field.formAway == 6>
          <a-select placeholder="请选择${field.remark}" v-decorator="[ '${field.name}', <#if field.isView?default(0) == 1>disableSubmit ? {} : validatorRules.${field.name} <#else>{}</#if>]" />
<#elseif field.formAway == 7>
          <a-select mode="multiple" placeholder="请选择${field.remark}" v-decorator="[ '${field.name}', <#if field.isView?default(0) == 1>disableSubmit ? {} : validatorRules.${field.name} <#else>{}</#if>]" />
<#else>
          <a-textarea :autosize="{ minRows: 4 }" placeholder="请输入${field.remark}" v-decorator="[ '${field.name}' ]"/>
</#if>
        </a-form-item>
</#if>
</#list>
      </a-form>
    </a-spin>
    <div
        :style="{
          position: 'absolute',
          left: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
        }">
        <a-button :style="{marginRight: '8px'}" @click="close">取消</a-button>
        <a-button @click="handleSubmit" type="primary">提交</a-button>
      </div>
  </a-drawer>
</template>

<script>
  import { postAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from 'moment'
  import ObjectTool from '@/utils/object-tool'

  export default {
    name: "${className}Modal",
    data () {
      return {
        title:"操作",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        disableSubmit: false,
        form: this.$form.createForm(this),
        validatorRules:{
<#list fieldList as field>
<#if field.name !='id' && field.remark?default('')?trim?length gt 0 && field.name != 'createTime' && field.name != 'updateTime'>
          ${field.name}:{rules: [{ required: true, message: '请输入${field.remark}!' }]},
</#if>
</#list>
        },
        url: {
          'fetch${className}Info': "/${className?uncap_first}/get",
          'saveOrUpdate${className}Info': "/${className?uncap_first}/saveOrUpdate"
        },
        drawerWidth: 0,
        formRequestKeys: [
          'id'<#list fieldList as field><#if field.name != 'id' && field.formAway != 4 && field.formAway != 5 && field.name != 'createTime' && field.name != 'updateTime'>, '${field.name}'</#if></#list>
        ]
      }
    },
    created() {
    },
    methods: {
      fetch${className}Info(id) {
        postAction(this.url.fetch${className}Info, { id }).then((res) => {
        });
      },
      add() {
        this.edit({});
      },
      edit(record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model<#list fieldList as field><#if field.name != 'id' && field.formAway != 4 && field.formAway != 5 && field.name != 'createTime' && field.name != 'updateTime'>, '${field.name}'</#if></#list>))
                //时间格式化
<#list fieldList as field>
<#if field.name !='id' && (field.formAway == 4 || field.formAway == 5)>
          this.form.setFieldsValue({${field.name}: this.model.${field.name} ? moment(this.model.${field.name}):null})
</#if>
</#list>
        });

      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleSubmit() {
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            this.confirmLoading = true;
            let formData = Object.assign(this.model, values);
            //时间格式化
<#list fieldList as field>
<#if field.name !='id' && field.name != 'createTime' && field.name != 'updateTime' && field.formAway == 4>
            formData.${field.name} = formData.${field.name} ? formData.${field.name}.format() : null;
<#elseif field.name !='id' && field.name != 'createTime' && field.name != 'updateTime' && field.formAway == 5>
            formData.${field.name} = formData.${field.name}?formData.${field.name}.format('YYYY-MM-DD HH:mm:ss'):null;
</#if>
</#list>
            console.log(formData);
            formData = ObjectTool.deleteDiff(formData, this.formRequestKeys);
            postAction(this.url.saveOrUpdate${className}Info, formData).then((res) => {
              this.$emit('ok');
            }).finally(() => {
              this.confirmLoading = false;
              this.close();
            });
          }
        })
      },
      handleCancel () {
        this.close()
      }
    },
    mounted() {
      const screenWidth = window.screen.width;
      if (screenWidth < 960) {
        this.drawerWidth = screenWidth * 0.9;
      } else {
        this.drawerWidth = screenWidth * 0.9;
      }
    }
  }
</script>

<style lang="less" scoped>
</style>